<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
          <FormItem label="订单单号" prop="orderId">
            <Input  v-model.number="form.orderId" @click.native="getProjectNum"/>
          </FormItem>
          <FormItem label="类型" prop="kinds">
            <Select v-model="form.kinds" style="width:200px" placeholder="请选择"  @on-change="selectKinds">
              <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
              <Option v-for="item in kindsList"  :label="item.kinds" :value="item.kinds"></Option>
            </Select>
          </FormItem>
          <FormItem label="项目名称" prop="projectName">
            <Input  placeholder="JenkinsId"  v-model.number="form.projectName"  disabled/>
          </FormItem>
          <FormItem label="价格" prop="price">
            <Input  placeholder="JenkinsId" type="number" v-model.number="form.price"  disabled/>
          </FormItem>
          <FormItem label="数量" prop="amout">
            <InputNumber :max="10" :min="1" v-model="form.amout"  @on-change="total"></InputNumber>
          </FormItem>
          <FormItem label="总价" prop="totalPrice">
            <Input type="number" v-model.number="form.totalPrice"  />
          </FormItem>
          <FormItem label="备注" prop="remark">
            <Input  placeholder="JenkinsId" v-model="form.remark" disabled/>
          </FormItem>
          <FormItem label="会员卡号" prop="customerId">
            <Input  v-model.number="form.customerId" placeholder="散客"/>
          </FormItem>
<!--          <FormItem label="付款方式" prop="payment">-->
<!--            <Input v-model="form.payment" placeholder="未付款" />-->
<!--          </FormItem>-->
          <FormItem label="经办人" prop="agent">
            <Cascader :data="agentList" :render-format="format"  v-model="form.agent" placeholder="待选择"></Cascader>
          </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save"  type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
  import { orderApi } from '@/api/order';
  import { paymentApi } from '@/api/payment';
  export default {
    name: 'OrderListForm',
    components: {
    },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      updateData: {
        type: Object
      }
    },
    data() {
      return {
        roleList: {},

        //表单数据
        form: {
         //订单单号
         orderId:null,
         //项目名称
         projectName:null,
         //类型
         kinds:"理发",
         //价格
         price:38,
         //数量
         amout:1,
         //总价
         totalPrice:38,
         //备注
         remark:"服务",
         //会员卡号
         customerId:"散客",
         //付款方式
         payment:"未付款",
         //经办人
         agent:"待选择",
        },
        //表单验证
        formValidate: {
        //订单单号
        //orderId:[{ type:'number',required: true, message: '请输入订单单号', trigger: 'blur' }],
        //项目名称
        projectName:[{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        //类型
        kinds:[{ required: true, message: '请输入类型', trigger: 'blur' }],
        //价格
        price:[{ type:'number',required: true, message: '请输入价格', trigger: 'blur' }],
        //数量
        amout:[{ type:'number',required: true, message: '请输入数量', trigger: 'blur' }],
        //总价
        totalPrice:[{ type:'number',required: true, message: '请输入总价', trigger: 'blur' }],
        //备注
        remark:[{ required: true, message: '请输入备注', trigger: 'blur' }],
        //会员卡号
        //customerId:[{ required: true, message: '请输入会员卡号', trigger: 'blur' }],
        //付款方式
        //payment:[{ required: true, message: '请输入付款方式', trigger: 'blur' }],
        //经办人
        //agent:[{ required: true, message: '请输入经办人', trigger: 'blur' }],
        },
        //类型下拉框数据
                               kindsList : [
                                   {
                                       "price":339,
                                       "kinds":"烫发",
                                       "remark":"服务",
                                       "projectName":"造型"
                                   },
                                  {
                                      "price":38,
                                      "kinds":"洗剪",
                                      "remark":"服务",
                                      "projectName":"剪发"
                                  },
                                 {
                                   "price":58,
                                   "kinds":"洗剪吹",
                                   "remark":"服务",
                                   "projectName":"剪发"
                                 },
                                 {
                                   "price":238,
                                   "kinds":"染发",
                                   "remark":"服务",
                                   "projectName":"剪发"
                                 },
                              ],
        agentList: [{
          value: 'hightStylist',
          label: "高级发型师",
          children: [{
            value: 'zhang10',
            label: "张十",
          }]
        }, {
          value: 'vipStylist',
          label: "VIP发型师",
          children: [{
            value: 'zhang11',
            label: "张十一",
          }]
        },
          {
            value: 'hightStylist',
            label: "发型师",
            children: [{
              value: 'zhang12',
              label: "张十二",
            }, {
              value: 'zhang13',
              label: "张十三",
              }]
          }]
      };
    },
  watch: {
      updateData: function(newValue, oldValue) {
          this.$refs['form'].resetFields();
          if (this.isUpdate) {
              for (let k in this.form) {
                  this.$set(this.form, k, newValue[k]);
              }
              this.$set(this.form, 'id', newValue['id']);
          }
      },
      isUpdate: function(newValue, oldValue) {
          if (!newValue) {
              this.resetForm();
              this.$refs['form'].resetFields();
          }
      }
  },
    created() {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year)
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      this.form.orderId = "MF" + CurrentDate + Math.floor(Math.random() * 10000)
    },
    mounted() {},
    methods: {

      format (labels, selectedData) {
        const index = labels.length - 1;
        const data = selectedData[index] || false;
        // if (data && data.code) {
        //   this.form.agent =  labels[index] + ' - ' + data.code;
        //   return labels[index] + ' - ' + data.code;
        // }
          this.form.agent =  labels[index];
          return  labels[index];
      },


    // 获取当前日期的方法
    // 	getProjectNum () {
    //       const projectTime = new Date() // 当前中国标准时间
    //       const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
    //       const Month = projectTime.getMonth() + 1 // 获取中国区月份
    //       const Day = projectTime.getDate() // 获取几号
    //       var CurrentDate = String(Year)
    //       if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
    //         CurrentDate += Month
    //       } else {
    //         CurrentDate += '0' + Month
    //       }
    //       if (Day >= 10) {
    //         CurrentDate += Day
    //       } else {
    //         CurrentDate += '0' + Day
    //       }
    //       this.form.orderId = "MF" + CurrentDate + Math.floor(Math.random() * 10000)
    //     },
      total(){
        console.log('kindsList',this.kindsList)
        const item = this.kindsList.find(item1=> item1.kinds === this.form.kinds)
        console.log(item)
        this.form.totalPrice = item.price * this.form.amout

      },

          selectKinds(){
             //console.log('kindsList',this.kindsList)
             const item = this.kindsList.find(item1=> item1.kinds === this.form.kinds)

            //console.log(item)
             this.form.price = item.price
             this.form.remark = item.remark
            this.form.projectName = item.projectName
            this.form.totalPrice = item.price * this.form.amout
           },
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.isUpdate) {
            //this.update();
             this.add();
           } else {
             this.add();
           }
         } else {
          this.$Message.error('参数验证错误，请仔细填写表单数据!');
         }
       });
      },
    resetForm() {
        this.form = {
          //ID
          id:null,
          //订单单号
          orderId:null,
          //项目名称
          projectName:null,
          //类型
          kinds:null,
          //价格
          price:null,
          //数量
          amout:null,
          //总价
          totalPrice:null,
          //备注
          remark:null,
          //会员卡号
          customerId:null,
          //付款方式
          payment:null,
          //经办人
          agent:null,
        };
        this.$refs['form'].resetFields();
      },
      async add() {
        this.$Spin.show();
        let res1 = await orderApi.addOrder(this.form);
        //let res2 = await paymentApi.addPayment(this.form);
        this.$Message.success(res1.msg);
        //this.$Message.success(res2.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');

      },
      async update() {
        this.$Spin.show();
        let res = await orderApi.updateOrder(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      }
    }

  };


</script>
